<%+cbi/valueheader%>
<style>
	.CodeMirror { 
		text-align: left !important;
		font-size: 15px;
		line-height: 150%;
		resize: both !important;
	}
</style>
<link rel="stylesheet" href="/luci-static/resources/openclash/lib/codemirror.css"/>
<link rel="stylesheet" href="/luci-static/resources/openclash/theme/material.css"/>
<link rel="stylesheet" href="/luci-static/resources/openclash/addon/fold/foldgutter.css"/>
<link rel="stylesheet" href="/luci-static/resources/openclash/addon/lint/lint.css">
<link rel="stylesheet" href="/luci-static/resources/openclash/addon/display/fullscreen.css">
<script src="/luci-static/resources/openclash/lib/codemirror.js"></script>
<script src="/luci-static/resources/openclash/mode/yaml/yaml.js"></script>
<script src="/luci-static/resources/openclash/addon/fold/foldcode.js"></script>
<script src="/luci-static/resources/openclash/addon/fold/foldgutter.js"></script>
<script src="/luci-static/resources/openclash/addon/fold/indent-fold.js"></script>
<script src="/luci-static/resources/openclash/addon/edit/matchbrackets.js"></script>
<script src="/luci-static/resources/openclash/addon/selection/active-line.js"></script>
<script src="/luci-static/resources/openclash/addon/lint/lint.js"></script>
<script src="/luci-static/resources/openclash/addon/lint/yaml-lint.js"></script>
<script src="/luci-static/resources/openclash/addon/lint/js-yaml.min.js"></script>
<script src="/luci-static/resources/openclash/addon/display/fullscreen.js"></script>

<script type="text/javascript">//<![CDATA[
function editor(id,wid,readOnly)
{
	var editor = CodeMirror.fromTextArea(id, {
	mode: "text/yaml",
	styleActiveLine: true,
	lineNumbers: true,
	theme: "material",
	lineWrapping: true,
	matchBrackets: true,
	foldGutter: true,
	lint: true,
	gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
	extraKeys: {
        "F11": function(cm) {
          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        "Esc": function(cm) {
          if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        }
      }
	});
	
	if (readOnly == "true") {
		editor.setOption("readOnly","true");
	}
	
	editor.setSize(wid,'700px');
	
}
var myEditor_use = document.getElementById("cbid.table.1.user");
var myEditor_use_wid = document.getElementById("cbi-table-1-user").offsetWidth;
var myEditor_def = document.getElementById("cbid.table.1.default");
var myEditor_def_wid = document.getElementById("cbi-table-1-default").offsetWidth;

editor(myEditor_use, myEditor_use_wid, 'false'); 
editor(myEditor_def, myEditor_def_wid, 'true'); 

//]]>
</script> 
<%+cbi/valuefooter%>